<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Quik Demo Page</title>
<link
	href="<c:url value="/resources/css/redmond/jquery-ui-1.10.4.custom.css"/>"
	rel="stylesheet">
<script src="<c:url value="/resources/js/jquery-1.7.2.js"/>"></script>
<script src="<c:url value="/resources/js/jquery-ui-1.10.4.custom.js"/>"></script>
<script src="<c:url value="/resources/js/quik/quik.util.js"/>"></script>
<script src="<c:url value="/resources/js/quik/quik.status.js"/>"></script>
<script src="<c:url value="/resources/js/quik/quik.business.js"/>"></script>
<script src="<c:url value="/resources/js/quik/quik.cellpager.js"/>"></script>
<script src="<c:url value="/resources/js/quik/tokenOverview.js"/>"></script>
<script>
/*
var g_tokenList_std = [];
var g_act_billing_id = 0;
var g_billing = {};
*/
var g_numPerRow = 6;
var g_rowPerPage = 16;
var g_widthCell = 'width:'+Math.ceil(100/g_numPerRow)+'%';
var g_cell_page = null;
var g_context = {};
//var g_tokenNoListSelected = {};
	
	$(function() {
		prepareDialogs();
	    $('.buttonsetClassDiv').buttonset();
		$('.quik-btn').button();
		prepareData();
		displayTokenByPageNo();
		g_context['billing'] = prepareBilling();
		if(g_context['billing']){
			var html = generateHtmlForBilling(g_context['billing']);
			$('#billingDetail_billingItems').html(html);
		}
		showPanel('billingDetail');
		if(g_context['billing']==null){
			showPanel('statusOverview');
		};
	});
	
	function findTokenByNo(tokenNo){
		return g_cell_page.findUniqueByProp('tokenNo', tokenNo);
	}
	function prepareBilling(){
		var billing = null;
		<c:if test="${billing != null}">
		billing = {};
		billing['id'] = '${billing.id}';
		billing['billing_no'] = '${billing.billing_no}';
		billing['crt_date'] = '${billing.crt_date}';
		billing['crt_user'] = '${billing.crt_user}';
		var g_billing_items = [];
		<c:forEach var="item" items="${billingItems}" varStatus="status">
		g_billing_items.push(
			{
				id:'${item.id}',
				product_name:'${item.product_name}',
				qty:'${item.qty}',
				status:'${item.status}',
				serve_status:'${item.serve_status}',
				worker_nos:'${item.worker_nos}',
				turn_types:'${item.turn_types}',
				call_turn_worker_nos:'${item.call_turn_worker_nos}',
				billing_service_ids:'${item.billing_service_ids}'
			}
		);
		</c:forEach>
		billing['billingItems'] = g_billing_items;
		</c:if>
		return billing;
	}
	function emptyAction(){
		;
	}
	function changeWorkerAction(serviceId){
		//TODO
		g_chose_billing_service['Active'] = serviceId;
		$('#inclWorkerChoosePanel').dialog('open');
		
	}
	function startServiceAction(itemId){
		var url='${pageContext.request.contextPath}/tokenOverview/submitBillingItemForKickoff';
		var serviceIds = [];
		var workerNos = [];
		var turnTypes = [];
		var callTurnWorkerNos = [];
		for(var i in g_chose_billing_service){
			if(i=='Active'){
				continue;
			}
			try{
				if(itemId==g_chose_billing_service[i]['billing_item_id']){
					if(g_chose_billing_service[i]['worker_no']==null || g_chose_billing_service[i]['worker_no']==''){
						alert('请先分配技师.');
						return;
					}
					serviceIds.push(g_chose_billing_service[i]['id']);
					workerNos.push(g_chose_billing_service[i]['worker_no']);
					turnTypes.push(g_chose_billing_service[i]['turn_type']);
					callTurnWorkerNos.push(g_chose_billing_service[i]['call_turn_worker_no']);
				};
			}catch(e){
				alert('error message:\n'+e);
			};
		}

		var html = generateFormForStartService(itemId, serviceIds, workerNos, turnTypes, callTurnWorkerNos);
		var form = $('#hiddenForm');
		form.attr('action',url);
		form.html(html);
		form.submit();
		
	}
	function cancelItemAction(itemId){
		var item = null;
		for(var i in g_context['billing']['billingItems']){
			if(g_context['billing']['billingItems'][i]['id']==itemId){
				item = g_context['billing']['billingItems'][i];
				break;
			};
		}
		if(item==null){
			alert('请选择正确的数据进行操作.');
			return;
		}
		if(biz_billing_item_ifNeedApproverForCancel(item)){
			$('#operationItemId').val(itemId);
			$('#inclApproverPanel').dialog('open');
		}else{
			var ifDoIt = confirm('请确认取消当前选中的消费项.');
			if(ifDoIt){
				submitCancelRequest(itemId);
			};
		};
	}
	function submitCancelRequest(itemId, approver, oprPassword){
		var url='${pageContext.request.contextPath}/tokenOverview/submitBillingItemToCancel';
		var tokenNo = $('#tokenNoSelected').html();
		var data = {
			id : itemId,//Tofixe - douhao
			staffNo : approver,
			password : oprPassword,
			tokenNo : tokenNo,
		}
		var callback = function(result){
			if(result['state']=='success'){
				var billing = result['data']['billing'];
				var billingItems = result['data']['billingItems'];
				billing['billingItems'] = billingItems;
				g_context['billing'] = billing;
				generateHtmlForBilling(billing, tokenNo);
			}
			if(result['state']=='failure'){
				alert(result['data']['exception']);
			};
		}
		$.post(url, data, callback, 'json');
	}
	function endServiceAction(itemId){
		var item = null;
		for(var i in g_context['billing']['billingItems']){
			if(g_context['billing']['billingItems'][i]['id']==itemId){
				item = g_context['billing']['billingItems'][i];
				break;
			};
		}
		var tokenNo = $('#tokenNoSelected').html();
		if(item==null){
			alert('请选择正确的数据进行操作.');
			return;
		}
		var ifDoIt = confirm('请确认取消当前选中的消费项.');
		if(!ifDoIt){
			return;
		};
		var url='${pageContext.request.contextPath}/tokenOverview/submitBillingItemToEnd';
		var data = {
			id : itemId,
			tokenNo : tokenNo,
		}
		var callback = function(result){
			if(result['state']=='success'){
				var billing = result['data']['billing'];
				var billingItems = result['data']['billingItems'];
				billing['billingItems'] = billingItems;
				g_context['billing'] = billing;
				generateHtmlForBilling(billing, tokenNo);
			}
			if(result['state']=='failure'){
				alert(result['data']['exception']);
			};
		}
		$.post(url, data, callback, 'json');
	}
	
	function clickBillingAction(tokenNo){
		var url='${pageContext.request.contextPath}/tokenOverview/queryBillingByTokenNo';
		var data = {
			tokenNo : tokenNo,//Tofixe - douhao
		}
		var callback = function(result){
			if(result['state']=='success'){
				var billing = result['data']['billing'];
				var billingItems = result['data']['billingItems'];
				billing['billingItems'] = billingItems;
				g_context['billing'] = billing;
				generateHtmlForBilling(billing, tokenNo);
				showPanel('billingDetail');
			}
		}
		$.post(url, data, callback, 'json');
	}
	function prepareData(){
		var list = [];
		<c:forEach var="token" items="${tokenList}" varStatus="status">
		list.push(
				{
					id 		: 	'${token.id}',
					tokenNo :	'${token.token_no}',
					status 	:	'${token.status}',
					tokenTypeName 	:	'${token.tokenTypeName}',
					statusName 		:	'${token.statusName}', 
					tokenTypeId		:	'${token.token_type_id}',
				}
		);
		</c:forEach>
		
		g_cell_page = new CellPager(list, g_rowPerPage, g_numPerRow);
		
		$('#curPageNoSpan').html("1");
		$('#totalPageNoSpan').html(g_cell_page.getNumbering()['totalPageNo']);
		
	}
	function nextPageAction(){
		if( g_cell_page.nextPage() ){
			displayTokenByPageNo();
		}
	}
	function prevPageAction(){
		if( g_cell_page.prevPage() ){
			displayTokenByPageNo();
		}
	}

	function displayTokenByPageNo(){
		var numbers = g_cell_page.getNumbering();
		var list = g_cell_page.getList();
		$('#curPageNoSpan').html(numbers['currPageNo']-(-1));
		var tokenHtml = generateHtmlForTokenPanel(numbers, list);
		$('#tokenListTable').html(tokenHtml);
		$('#tokenListTable td.free').click(
				function(){
					showPanel('openTokenPanel');
					var jq = $(this);
					if(jq.hasClass('tdSelected')){
						jq.removeClass('tdSelected');
						jq.addClass('tdList');
						delete g_context['g_tokenNoListSelected']['tokenNo-'+jq.html()];
					}else{
						jq.removeClass('tdList');
						jq.addClass('tdSelected');
						g_context['g_tokenNoListSelected']['tokenNo-'+jq.html()]=jq.html();
					}
					var html = '';
					for(var n in g_context['g_tokenNoListSelected']){
						var token = findTokenByNo(g_context['g_tokenNoListSelected'][n]);
						html+='<tr><td class="cmm">'+token['tokenNo']+'</td><td class="cmm">'+token['tokenTypeName']+'</td></tr>';
					}
					$('#openTokenList').html(html);
				}
		);
		$('#tokenListTable td.used').click(
				function(){
					clickBillingAction($(this).html());
				}
		);
		$('#tokenListTable td.free').dblclick(
				function(){
					showPanel('openTokenPanel');
				}
		);

	}
	
	function cancelForOpenTokenPanel(){
		$('#tokenListTable td.free').each(
				function(){
					var jq = $(this);
					jq.removeClass('tdSelected');
					jq.addClass('tdList');
				}
		);
		$('#openTokenList').html('');
		g_context['g_tokenNoListSelected']={};
		showPanel('statusOverview');
	}
	var panels = ['billingDetail','statusOverview','openTokenPanel',''];
	function showPanel(panel){
		for(var n in panels){
			if(panels[n]==panel){
				$('#'+panels[n]).show();
			}else{
				$('#'+panels[n]).hide();
			};
		};
	}
	
	function cancelForBillingDetail(){
		showPanel('statusOverview');
	}
	function tokenTypeClickAction(){
		var tokenTypeId = $('input[name="tokenType"]:checked').val();
		g_cell_page.filter('tokenTypeId', tokenTypeId);
		displayTokenByPageNo();
	}
	function submitToOpenToken(){
		if(g_context['g_tokenNoListSelected'].length<1){
			alert('请先登记手牌.');
			return;
		}
		var html = genereateFormForOpenToken(g_context['g_tokenNoListSelected']);
		var form = $('#hiddenForm');
		form.attr('action','${pageContext.request.contextPath}/tokenOverview/submitTokenToOpen').html(html).submit();
		
	}
	function alertObject(obj){
		var str = '';
		for(var n in obj){
			str += 'data['+n+']='+obj[n]+'\n';
		}
		alert(str);
	}
	</script>
<style>
body {
	font: 80% "微软雅黑", "YouYuan";
	margin: 10px;
}

td .tdList {
	border: 1px solid gray;
}

td .tdSelected {
	border: 1px solid yellow;
}

td .used {
	background-color: yellow;
	cursor: pointer;
}

td .free {
	background-color: white;
	cursor: pointer;
}

td .unknown {
	background-color: red
}

td.cmm,th.cmm {
	border: 1px solid gray;
}

td.cmm_n,th.cmm_n {
	border: 1px solid gray;
	text-align: right;
}
</style>
</head>
<body>

	<table style='border: 0px solid black; width: 1170px;' align='center'>
		<tr>
			<td align='center' style='width: 50%'>
				<table style='border: 0px solid green; width: 100%'>
					<tr>
						<!-- searching criteria button list row -->
						<td><div id='typeDivId' class='buttonsetClassDiv'>
								<input type="radio" id='tokenType0' name="tokenType"
									onchange="tokenTypeClickAction()" value="*" /><label
									for="tokenType0">所有</label>
								<c:forEach var="tokenType" items="${tokenTypeList}">
									<input type="radio" id='tokenType${tokenType.id}'
										name="tokenType" onchange="tokenTypeClickAction()"
										value="${tokenType.id}" />
									<label for="tokenType${tokenType.id}">${tokenType.token_type_name}</label>
								</c:forEach>
							</div></td>
					</tr>
					<tr>
						<!-- result list row -->
						<td>
							<table style='border: 0px solid green; width: 100%' cellspacing=2
								cellpadding=2 id='tokenListTable'>
							</table>
							<button class='quik-btn' onclick='prevPageAction()'>上一页</button>
							<span id='curPageNoSpan'>1</span>/<span id='totalPageNoSpan'>1</span>
							<button class='quik-btn' onclick='nextPageAction()'>下一页</button>
						</td>
					</tr>
				</table>
			</td>
			<td style='vertical-align: top'>



				<div id='statusOverview' style='display: none'>
					<table style='border: 1px solid gray; width: 100%;' cellspacing=2
						cellpadding=2>
						<c:forEach var="item" items="${tokenStatList}">
							<tr>
								<td class='tdList ${item.status}' style='width: 35%'>${item.name}</td>
								<td class='tdList ${item.status}' style='width: 35%'>${item.statusName}</td>
								<td class='tdList ${item.status}' style='text-align: right'>${item.amount}</td>
							</tr>
						</c:forEach>
					</table>
				</div>


				<div id='openTokenPanel' style='display: none'>
					<table style='border: 1px solid gray; width: 100%;' cellspacing=2
						cellpadding=2>
						<tr>
							<th class='cmm'>手牌号</th>
							<th class='cmm'>手牌类型</th>
						</tr>
						<tbody id='openTokenList'>
						</tbody>
						<tbody>
							<tr>
								<td class='cmm'>联系人</td>
								<td class='cmm'><input type='text' id='contactStaffNo'
									value='' /></td>
							</tr>
						</tbody>
					</table>
					<button class='quik-btn' onclick='submitToOpenToken()'>开单</button>
					<button class='quik-btn' onclick='cancelForOpenTokenPanel()'>取消</button>
				</div>


				<div id='billingDetail' style='display: none'>
					<table style='border: 1px solid gray; width: 100%;' cellspacing=2
						cellpadding=2>
						<tr>
							<td style='border: 1px solid gray; width: 20%'>账单号</td>
							<td style='border: 1px solid gray; width: 30%'
								id='billingDetail_billingNo'>2040316-0012-01</td>
							<td style='border: 1px solid gray; width: 20%'>选中编号</td>
							<td style='border: 1px solid gray;' id='tokenNoSelected'>2040316-0012-01</td>
						</tr>
						<tr>
							<td style='border: 1px solid gray; width: 25%'>下单时间</td>
							<td style='border: 1px solid gray; width: 25%'
								id='billingDetail_crtDate'>2014年3月16日13:02</td>
							<td style='border: 1px solid gray; width: 25%'>下单人</td>
							<td style='border: 1px solid gray;' id='billingDetail_crtUser'>S002</td>
						</tr>
					</table>
					<br />
					<table style='border: 1px solid gray; width: 100%' cellspacing=2
						cellpadding=2>
						<tr>
							<th style='border: 1px solid gray; width: 60; font-weight: bold'>名称</th>
							<th style='border: 1px solid gray; width: 30; font-weight: bold'>数量</th>
							<th style='border: 1px solid gray; width: 120; font-weight: bold'>操作</th>
							<th style='border: 1px solid gray; font-weight: bold'>备注</th>
						</tr>
						<tbody id='billingDetail_billingItems'>
						</tbody>
					</table>
					<button class='quik-btn'>上一页</button>
					<span>1</span>/<span>1</span>
					<button class='quik-btn'>下一页</button>
					<br /> <br />
					<button class='quik-btn' onclick='chooseProductAction()'>消&nbsp;&nbsp;&nbsp;&nbsp;费</button>
					<button class='quik-btn' onclick='cancelForBillingDetail()'>返&nbsp;&nbsp;&nbsp;&nbsp;回</button>
				</div>
			</td>
		</tr>
	</table>



	<script>
function prepareDialogs(){
	$( '#inclTurnTypeChoosePanel' ).dialog({
		autoOpen: false,
		height: 300,
		width: 600,
		modal: true,
		buttons:{
			'确定': function(){
				okForChooseTurnTypeAction();
			}
		}
	});
	$( "#inclProductChoosePanel" ).dialog({
		autoOpen: false,
		height: 550,
		width: 600,
		modal: true,
		buttons:{
			'确定': function(){
				submitChoseProductAction();
				chooseProductClearAction();
				$( this ).dialog( "close" );
			},
			'清除': function(){
				chooseProductClearAction();
			},
			'取消': function(){
				chooseProductClearAction();
				$( this ).dialog( "close" );
			}
		}
	});
	$( "#inclApproverPanel" ).dialog({
		autoOpen: false,
		height: 200,
		width: 600,
		modal: true,
		buttons:{
			'确定': function(){
				if($('#opreationApprover').val()==null || $('#opreationApprover').val()==''){
					$('#opreationApprover').focus();
					alert('请输入审批工号.');
					return;
				}
				if(!validWorkerNo($('#opreationApprover').val())){
					$('#choseWorkerNo').focus();
					alert('审批工号不正确，请重新输入.');
					return;
				}

				if($('#opreationPassword').val()==null || $('#opreationPassword').val()==''){
					$('#opreationPassword').focus();
					alert('请输入审批人操作密码.');
					return;
				}
				submitCancelRequest($('#operationItemId').val(),$('#operationApprover').val(),$('#operationPassword').val());
			},
			'取消':function(){
				$('#opreationPassword').val('');
				$('#operationApprover').val('');
				$(this).diaolog('close');
			}
		}
	});
	$( "#inclWorkerChoosePanel" ).dialog({
		autoOpen: false,
		height: 200,
		width: 600,
		modal: true,
		buttons:{
			'确定': function(){
				if($('#choseWorkerNo').val()==null || $('#choseWorkerNo').val()==''){
					$('#choseWorkerNo').focus();
					alert('请输入技师工号.');
					return;
				}
				if(!validWorkerNo($('#choseWorkerNo').val())){
					$('#choseWorkerNo').focus();
					alert('技师工号不正确，请重新输入.');
					return;
				}
				var id = g_chose_billing_service['Active'];
				$('#'+id+'WorkerNo').html($('#choseWorkerNo').val());
				g_chose_billing_service[id]['worker_no']=$('#choseWorkerNo').val();
				g_chose_billing_service['Active'] = null;
				$( this ).dialog( "close" );
				var url='${pageContext.request.contextPath}/tokenOverview/submitBillingServiceToUpdate';
				var data = {
						id : id,
						worker_no : $('#choseWorkerNo').val(),
				}
				var callback = function(result){
					if(result['state']=='failure'){
						alert('系统错误 - '+result['data']['exception']);
					}
				}
				$.post(url, data, callback, 'json');
			}
		}
	});
}
function submitChoseProductAction(){
	if(incl_products_chosen.length<1){
		alert('请先选择消费.');
		return;
	}
	var html = '<input type="hidden" name="billingId" value="'+g_context['billing']['id']+'" />';
	for(var i in incl_products_chosen){
		html += '<input type="hidden" name="productNos" value="'+incl_products_chosen[i]['product_no']+'" />';
		html += '<input type="hidden" name="qtys" value="'+incl_products_chosen_qty[i]+'" />';
	}
	var tokenNo = $('#tokenNoSelected').html();
	if(tokenNo!=null||tokenNo!=''){
		html += '<input type="hidden" name="tokenNo" value="'+tokenNo+'" />';
	}
	var form = $('#hiddenForm');
	form.attr('action','${pageContext.request.contextPath}/tokenOverview/submitProductToBilling');
	form.html(html);
	form.submit();
}
function chooseProductClearAction(){
	incl_products_chosen = [];
	refreshChoseProduct();
}
function chooseProductAction(){
	$( '#productSubCategory0' ).attr('checked',true);
	productSubCategoryChangeAction();
	$( "#inclProductChoosePanel" ).dialog('open');
}
function productSubCategoryChangeAction(){
	var productSubCategory = $('input[name="productSubCategory"]:checked').val();
	g_cp_product_list = [];
	if('*'==productSubCategory){
		g_cp_product_list = incl_products;
	}else{
		for(var i in incl_products){
			var product = incl_products[i];
			if(product['product_sub_category_id']==productSubCategory){
				g_cp_product_list.push(product);
			}
		}
	}
	g_cp_totalPage = Math.ceil(g_cp_product_list.length * 1.0 / g_cp_rowPerPage);
	g_cp_curPageNo = 0;
	chooseProductShowCurrentPage();
}
function chooseProductShowCurrentPage(){
	$('#chooseProductCurPageNoSpan').html(g_cp_curPageNo-(-1));
	$('#chooseProductTotalPageNoSpan').html(g_cp_totalPage);
	var html = '';
	for(var i=0;i<g_cp_rowPerPage;i++){
		var index = i+g_cp_curPageNo*g_cp_rowPerPage;
		html += '<tr>';
		if(index<g_cp_product_list.length){
			var product = g_cp_product_list[index];
			html += '<td class="cmm_n">'+(index-(-1))+'</td>';
			html += '<td class="cmm"><a href="javascript: chooseProductAddToBillingAction('+product['id']+')">'+product['product_name']+'</a></td>';
			html += '<td class="cmm_n">'+product['price']+'</td>';
		}else{
			html += '<td class="cmm">&nbsp;</td>';
			html += '<td class="cmm">&nbsp;</td>';
			html += '<td class="cmm">&nbsp;</td>';
		}
		html += '</tr>';
	}
	html += '</tr>';
	$('#chooseProductListTbody').html(html);
}
function chooseProductAddToBillingAction(productId){
	var index = -1;
	for(var i in incl_products_chosen){
		if(incl_products_chosen[i]['id']==productId){
			index = i;
			break;
		}
	}
	if(index==-1){
		for(var i in incl_products){
			if(incl_products[i]['id']==productId){
				incl_products_chosen.push(incl_products[i]);
				incl_products_chosen_qty.push(1);
			}
		}
	}else{
		incl_products_chosen_qty[index] = incl_products_chosen_qty[index]-(-1);
		
	}
	refreshChoseProduct();
}
function refreshChoseProduct(){
	var html = '';
	for(var i in incl_products_chosen){
		html += '<tr>';
		html += '<td class="cmm"><a href="javascript: removeChoseProductFromList('+i+')">'+incl_products_chosen[i]['product_name']+'</a></td>';
		html += '<td class="cmm_n"><a href="javascript: removeChoseProductFromList('+i+')">'+incl_products_chosen_qty[i]+'</a></td>';
		html += '</tr>';
	}
	$('#chooseProductSelectedListTbody').html(html);
}
function removeChoseProductFromList(index){
	var qty = incl_products_chosen_qty[index];
	if(qty<2){
		incl_products_chosen.splice(index,1);
		incl_products_chosen_qty.splice(index,1);
	}else{
		incl_products_chosen_qty[index] = incl_products_chosen_qty[index]-1;
	}
	refreshChoseProduct();
}
function chooseProductPrevPageAction(){
	if(g_cp_curPageNo<=0){
		g_cp_curPageNo = 0;
	}else if(g_cp_curPageNo>=g_cp_totalPage){
		g_cp_curPageNo = g_cp_totalPage - 1;
	}else {
		g_cp_curPageNo = g_cp_curPageNo - 1;
	}
	chooseProductShowCurrentPage();
}
function chooseProductNextPageAction(){
	if(g_cp_curPageNo<0){
		g_cp_curPageNo = 0;
	}else if(g_cp_curPageNo>=g_cp_totalPage-1){
		g_cp_curPageNo = g_cp_totalPage - 1;
	}else {
		g_cp_curPageNo = g_cp_curPageNo + 1;
	}
	chooseProductShowCurrentPage();
}
var g_cp_rowPerPage = 10;
var g_cp_curPageNo = 0;
var g_cp_totalPage = 0;
var g_cp_startPageNo = 0;
var g_cp_product_list = [];
var incl_product_categories = [];
var incl_product_sub_categories = [];
var incl_products = [];
var incl_products_chosen = [];
var incl_products_chosen_qty = [];
<c:forEach var="item" items="${productCategoryList}" varStatus="status">
incl_product_categories.push({
	id:'${item.id}',
	product_category_name:'${item.product_category_name}',
	description:'${item.description}',
	seq:'${item.seq}',
	crt_user:'${item.crt_user}',
	crt_date:'${item.crt_date}',
	mod_user:'${item.mod_user}',
	mod_date:'${item.mod_date}'
});
</c:forEach>

<c:forEach var="item" items="${productSubCategoryList}" varStatus="status">
incl_product_sub_categories.push({
	id:'${item.id}',
	product_category_id:'${item.product_category_id}',
	product_sub_category_name:'${item.product_sub_category_name}',
	description:'${item.description}',
	crt_user:'${item.crt_user}',
	mod_user:'${item.mod_user}',
	crt_date:'${item.crt_date}',
	mod_date:'${item.mod_date}'
});
</c:forEach>

<c:forEach var="item" items="${productList}" varStatus="status">
incl_products.push(
  {
	id:'${item.id}',
	product_sub_category_id:'${item.product_sub_category_id}',
	product_no:'${item.product_no}',
	product_name:'${item.product_name}',
	price:'${item.price}',
	vip_price:'${item.vip_price}',
	unit:'${item.unit}',
	if_need_worker:'${item.if_need_worker}',
	if_chess_room:'${item.if_chess_room}',
	if_drug:'${item.if_drug}',
	if_able_gift:'${item.if_able_gift}',
	if_able_discount:'${item.if_able_discount}',
	discount_range:'${item.discount_range}',
	if_able_commission:'${item.if_able_commission}',
	len_of_min:'${item.len_of_min}',
	num_of_hour:'${item.num_of_hour}',
	if_plus_service:'${item.if_plus_service}',
	min_of_alert:'${item.min_of_alert}',
	min_of_buff:'${item.min_of_buff}',
	if_manual:'${item.if_manual}',
	if_printer:'${item.if_printer}',
	printer_no:'${item.printer_no}',
	remark:'${item.remark}',
	crt_user:'${item.crt_user}',
	mod_user:'${item.mod_user}',
	crt_date:'${item.crt_date}',
	mod_date:'${item.mod_date}',
	seq_by_sys:'${item.seq_by_sys}'
  }
);
</c:forEach>



</script>
	<div id="inclProductChoosePanel" title="选择消费" style='display: none'>
		<div id="productSubCategoryDivId" class='buttonsetClassDiv'>
			<input type="radio" id='productSubCategory0'
				name="productSubCategory"
				onchange="productSubCategoryChangeAction()" value="*" /> <label
				for="productSubCategory0">所有</label>
			<c:forEach var="item" items="${productSubCategoryList}"
				varStatus="status">
				<input type="radio" id='productSubCategory${item.id}'
					name="productSubCategory"
					onchange="productSubCategoryChangeAction()" value="${item.id}" />
				<label for="productSubCategory${item.id}">${item.product_sub_category_name}</label>
			</c:forEach>
		</div>
		<br />
		<div style='height: 330px'>
			<table style='border: 0px solid gray; width: 100%;' cellspacing=2
				cellpadding=2>
				<tr>
					<td style='width: 320px' style='vertical-align:top'>
						<table style='border: 1px solid gray; width: 100%;' cellspacing=2
							cellpadding=2>
							<tr>
								<th style='width: 40px' class='cmm'>No.</th>
								<th style='width: 50%' class='cmm'>名称</th>
								<th class='cmm'>数量</th>
							</tr>
							<tbody id='chooseProductListTbody'></tbody>
						</table>
					</td>
					<td style='vertical-align: top'>
						<table style='border: 1px solid gray; width: 100%;' cellspacing=2
							cellpadding=2>
							<tr>
								<th style='width: 60%' class='cmm'>选择消费</th>
								<th class='cmm'>数量</th>
							</tr>
							<tbody id='chooseProductSelectedListTbody'></tbody>
						</table>
					</td>
				</tr>
			</table>
		</div>
		<button class='quik-btn' onclick='chooseProductPrevPageAction()'>上一页</button>
		<span id='chooseProductCurPageNoSpan'>1</span>/<span
			id='chooseProductTotalPageNoSpan'>1</span>
		<button class='quik-btn' onclick='chooseProductNextPageAction()'>下一页</button>
	</div>
	<script>
var g_chose_billing_service = {
		/*id:{
			id:'',
			worker_no:'',
			turn_type:'',
			call_turn_worker_no:''
			active:''
		},
		'Active':id*/
};
function turnTypeChangeAction(){
	var turnType = $('input[name="turnType"]:checked').val();
	if('cuoCall'==turnType){
		$('#callTurnWorkerNo').removeAttr('disabled');
	}else{
		submitBillingServiceToUpdate(g_chose_billing_service['Active'], turnType, '');
		g_chose_billing_service[g_chose_billing_service['Active']]['turn_type'] = turnType;
		$('#'+g_chose_billing_service['Active']+'ServiceTurnType').html(POJO['TurnType'][turnType]);
		$('#callTurnWorkerNo').attr('disabled',true);
		$('#inclTurnTypeChoosePanel').dialog('close');
	};
}
function submitBillingServiceToUpdate(id, turnType, callTurnWorkerNo){
	var url='${pageContext.request.contextPath}/tokenOverview/submitBillingServiceToUpdate';
	var data = {
			id : id,
			turn_type : turnType, 
			call_turn_worker_no : callTurnWorkerNo
	}
	var callback = function(result){
		if(result['state']=='failure'){
			alert('刚才更新操作不成功，请重新尝试.');
		}
	}
	$.post(url, data, callback, 'json');
}

function okForChooseTurnTypeAction(){
	var turnType = $('input[name="turnType"]:checked').val();
	if('cuoCall'==turnType && $('#callTurnWorkerNo').val()==''){
		$('#callTurnWorkerNo').focus();
		alert('请出入Call钟技师.');
		return;
	}
	if('cuoCall'==turnType && !validWorkerNo($('#callTurnWorkerNo').val())){
		$('#callTurnWorkerNo').focus();
		alert('技师工号无效，请重新输入.');
		return;
	}
	g_chose_billing_service[g_chose_billing_service['Active']]['turn_type'] = turnType;
	g_chose_billing_service[g_chose_billing_service['Active']]['call_turn_worker_no'] = $('#callTurnWorkerNo').val();
	$('#'+g_chose_billing_service['Active']+'ServiceTurnType').html(POJO['TurnType'][turnType]+','+$('#callTurnWorkerNo').val());
	$('#callTurnWorkerNo').val('');
	$('#inclTurnTypeChoosePanel').dialog('close');
	submitBillingServiceToUpdate(g_chose_billing_service['Active'], turnType, $('#callTurnWorkerNo').val());
}
function validWorkerNo(workerNo){
	<c:forEach var="item" items="${workers}" varStatus="status">
	if(workerNo=='${item.worker_no}'){
		return true;
	}
	</c:forEach>
	return false;
}
function showTurnTypeChooseAction(serviceId){
	g_chose_billing_service['Active'] = serviceId;
	var turnType = $('input[name="turnType"]:checked').val();
	if('cuoCall'==turnType){
		$('#callTurnWorkerNo').removeAttr('disabled');
	}else{
		$('#callTurnWorkerNo').attr('disabled',true);
	};
	$('#inclTurnTypeChoosePanel').dialog('open');
}
</script>
	<div id="inclTurnTypeChoosePanel" title="上钟方式" style='display: none'>
		<div class='buttonsetClassDiv'>
			<c:forEach var="item" items="${callTurns}" varStatus="status">
				<input type="radio" id='turnType${item.id}' name="turnType"
					onchange="turnTypeChangeAction()" value="${item.code}" />
				<label for="turnType${item.id}">${item.name}</label>
			</c:forEach>
		</div>
		<br /> Call钟技师: <input type='text' id='callTurnWorkerNo' value='' />
	</div>
	<div id="inclWorkerChoosePanel" title="输入技师工号" style='display: none'>
		技师工号: <input type='text' id='choseWorkerNo' value='' />
	</div>
	<div id="inclApproverPanel" title="输入审批工号和操作密码" style='display: none'>
		工号: <input type='text' id='operationApprover' value='' /><br />
		操作密码: <input type='password' id='operationPassword' value='' /> <input
			type='hidden' id='operationItemId' value='' />
	</div>
	<form name="hiddenForm" id="hiddenForm" method="post"
		style='display: none'></form>
</body>
</html>
